<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" :class="{wd: !item.status}">
				<navigator :url="'/pages/msg/detail?id=' + item.id" class="tit dot">{{item.title}}</navigator>
				<text class="date">{{item.creatTime | date}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMessageList
	} from '@/api/user.js'
	export default {
		filters: {
			date(val) {
				if(val && val !== '' && val !== null) {
					return val.split(' ')[0]
				} else {
					return ''
				}
			}
		},
		data() {
			return {
				title: '',
				page: 1,
				pageSize: 10,
				list: []
			};
		},
		onLoad() {
			this.init()
		},
		onReachBottom() {
			uni.showLoading({
				title: '加载中...'
			})
			this.page++
		},
		methods: {
			init() {
				getMessageList({pageNumber: this.page, pageSize: this.pageSize}).then(res => {
					uni.hideLoading()
					this.total = res.data.total
					res.data.messageList.forEach(r => {
						this.list.push(r)
					})
				})
			},
		}
	}
</script>

<style lang="scss">
page {
	padding-top: 30rpx;
}
.item {
	margin: 0 30rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ededed;
	padding-left: 25rpx;
	position: relative;
	.tit {
		line-height: 80rpx;
		color: #999;
	}
	.date {
		line-height: 80rpx;
		display: inline-block;
		color: #999;
		font-size: 28rpx;
	}
}
.item.wd .tit {
	color: #333;
}
.item::before {
	content: '';
	background-color: #999;
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.item.wd::before {
	background-color: #C10016;
}
.dot {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}
</style>
